<template>
  <a-select
    size="large"
    v-model="userId"
    @change="handelChange"
    placeholder="请选择"
    :disabled="disabled"
  >
    <a-select-option
      v-for="item in userData"
      :value="item.userName"
      :key="item.userName"
    >
      {{ item.name }}
    </a-select-option>
  </a-select>
</template>

<script>
import api from "@/util/api";

export default {
  name: "SDeptSelect",
  props: {
    deptId: {
      type: String
    },
    value: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    },
    getUrl: {
      type: String,
      default: "/api/cbb-userauth/user/queryDeptHeadByDeptId"
    }
  },
  data() {
    return {
      userData: [],
      userId: this.value,
      filter: this.adcd
    };
  },
  mounted() {},
  watch: {
    deptId() {
      this.filter = this.deptId;
      this.getuserDataByDept();
    },
    userId(val) {
      if (val) {
        this.$emit("change-done", val);
      }
    }
  },
  created() {
    this.getuserDataByDept(this.value);
  },
  methods: {
    // 根据机构获取人员
    getuserDataByDept(flag) {
      api
        .get(
          `/api/${this.$apiUrl}-userauth/user/queryDeptHeadByDeptId?deptId=${this.filter}`
        )
        .then((res) => {
          this.userData = res ? res : [];
          this.userId = flag ? this.value : res ? res[0].userName : "";
          this.$emit("input", this.deptId);
        });
    },
    handelChange(val) {
      // this.$emit("change", val);
      this.$emit("input", val);
    }
  }
};
</script>
